{% extends 'base.html' %}
{% load staticfiles %}
{% load codalab_tags %}
{% load tz %}
{% load humanize %}
{% load static %}

{% block head_title %}Competition{% endblock %}
{% block page_title %}Competition{% endblock page_title %}

{% block extra_scripts %}
    <script src="{% static "js/vendor/readmore.min.js" %}"></script>

    <script src="{% static "js/vendor/jquery.tablesorter.min.js" %}"></script>

    <script src="https://cdn.jsdelivr.net/npm/dompurify@2/dist/purify.min.js"></script>

    <style>
    #public_submission_table th b {
        cursor: pointer;
    }
    </style>
{% endblock %}

{% block content %}

{% if request.user.is_staff %}
    <a href="{% url "competitions:download" competition_pk=competition.pk %}" class="btn btn-primary">DOWNLOAD COMPETITION BUNDLE!</a>
{% endif %}
{% if is_admin_or_owner %}
    <h3>Organizer features</h3>
    <a href="{% url "competitions:edit" pk=competition.pk %}" class="btn btn-primary">Edit</a>
    <a href="{% url 'my_competition_participants' competition_id=competition.pk %}" class="btn btn-primary">
        Participants
        {% if comp_num_pending_teams > 0 %}
        <span class="glyphicon glyphicon-exclamation-sign" style="color:red">
        {% endif %}
    </a>
    <a href="{% url 'my_competition_submissions' competition_id=competition.pk %}" class="btn btn-primary">Submissions</a>
    <a href="{% url 'competitions:dumps' competition_pk=competition.pk %}" class="btn btn-primary">Dumps</a>
    <a href="{% url 'competitions:widgets' pk=competition.pk %}" class="btn btn-primary">Widgets</a>
    <hr>
{% endif %}
<div class="competition-view">
    <div class="row">
        <div class="col-sm-2">
            <div class="img-container">
                {% if competition.image_url %}
                    <img class="img-responsive" src="{{ competition.image_url }}">
                {% else %}
                    <img class="img-responsive" src="{% static "img/ProfileImageDummy.jpg" %}">
                {% endif %}
            </div>
        </div>
        <div class="col-sm-10">
            <h2>{{ competition.title }}</h2>
            {% if not competition.published %}
                <code id="secret_url">Secret url:
                    <a href="{% url 'competitions:view' pk=competition.pk %}?secret_key={{ competition.secret_key }}">https://{{ site }}{% url 'competitions:view' pk=competition.pk %}?secret_key={{ competition.secret_key }}</a>
                </code>


            {% endif %}
            <div class="organizer">
                Organized by {{ competition.creator }} - Current server time: {{ current_server_time|utc }} UTC<br>
                {% if competition.reward and competition.reward > 0 %}
                     Reward <b>${{ competition.reward|intcomma }}</b>
                {% endif %}
            </div>
            <input type="hidden" id="competitionId" value="{{competition.id}}" />
            <input type="hidden" id="cstoken" value="{{csrf_token}}" />
            <div class="phase-container">
                <div class="row">
                    {% if previous_phase and active_phase %}
                        <div class="col-sm-4">
                            <div class="phase">
                                <h4>Previous</h4>
                                <span class="phase-label label phase-label-{% if previous_phase.color %}{{ previous_phase.color }}{% else %}default{% endif %}">{{previous_phase.label}}</span>
                                <div class="date">{{previous_phase.start_date|utc}} UTC</div>
                            </div>
                        </div>
                    {% endif %}

                    {% if active_phase %}
                        <div class="col-sm-4">
                            <div class="phase current">
                                <h4><span class="glyphicon glyphicon-play"></span> Current</h4>
                                <span class="phase-label label phase-label-{% if active_phase.color %}{{ active_phase.color }}{% else %}default{% endif %}">{{active_phase.label}}</span>
                                <div class="date">{{active_phase.start_date|utc}} UTC</div>
                            </div>
                        </div>
                    {% endif %}

                    {# If we haven't begun the competition yet, show the first phase #}
                    {% if not active_phase %}
                        <div class="col-sm-4">
                            <div class="phase">
                                <h4>First phase</h4>
                                <span class="phase-label label phase-label-{% if first_phase.color %}{{ first_phase.color }}{% else %}default{% endif %}">{{first_phase.label}}</span>
                                <div class="date">{{first_phase.start_date|utc}} UTC</div>
                            </div>
                        </div>
                    {% endif %}

                    {% if next_phase %}
                        <div class="col-sm-4">
                            <div class="phase">
                                <h4>Next</h4>
                                <span class="phase-label label phase-label-{% if next_phase.color %}{{ next_phase.color }}{% else %}default{% endif %}">{{next_phase.label}}</span>
                                <div class="date">{{next_phase.start_date|utc}} UTC</div>
                            </div>
                        </div>
                    {% endif %}

                    {% if not previous_phase or not active_phase or not next_phase %}
                        <div class="col-sm-4">
                            <div class="phase">
                                <h4>End</h4>
                                <span class="phase-label label competition-end">Competition Ends</span>
                                <div class="date">{% if competition.end_date %}{{competition.end_date|utc}} UTC{% else %}Never{% endif %}</div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <section class="competition-tabs">
        <ul class="nav nav-tabs" id="competition_tab_nav">
            {% for tab, contents in tabs.items %}
                {% if tab.codename == "participate" %}
                    {# Put this before participate tab #}
                    <li><a href="#phases" role="tab" data-toggle="tab">Phases</a></li>
                {% endif %}
                <li><a href="#{{tab.codename|slugify}}" role="tab" data-toggle="tab">{{tab.name}}</a></li>
                {% if tab.codename == "results" %}
                    {# Put this after results tab #}
                    {% if competition.allow_public_submissions %}
                    <!--<li><a href="#public_submissions" role="tab" data-toggle="tab">Public submissions</a></li>-->
                    <li><a href="{% url 'competitions:public_submissions' pk=competition.pk%}">Public Submissions</a></li>
                    {% endif %}
                    {% if competition.enable_forum %}
                    <li><a href="{% url 'forum_detail' forum_pk=competition.forum.pk %}">Forums <i class="glyphicon glyphicon-log-in"></i></a></li>
                    {% endif %}
                    {% if competition.enable_teams and not competition.allow_organizer_teams %}
                        {% if my_status == "approved" %}
                            <li>
                                <a href="{% url 'team_detail' competition_pk=competition.pk %}">Team
                                    <i class="glyphicon glyphicon-cog"></i>
                                    {% if new_team_submission > 0 %}
                                        <span class="label label-danger">{{new_team_submission}}</span>
                                    {% endif %}
                                    {% if my_team_alert == 1 %}
                                        <span class="glyphicon glyphicon-exclamation-sign" style="color:red"></span>
                                    {% endif %}
                                </a>
                            </li>
                        {% endif %}
                    {% endif %}
                {% endif %}
            {% endfor %}
        </ul>
        <div class="tab-content">
            {% for tab, contents in tabs.items %}
                {# Let's insert the "phases" tab just before participate #}
                {% if tab.codename == "participate" %}
                    <div class="tab-pane" id="phases">
                        <div class="tab-inner">
                            <div class="phase-list">
                                {% for phase in competition.phases.all %}
                                    <div class="phase-list-item panel phase-list-item-{% if phase.color %}{{ phase.color }}{% else %}default{% endif %}">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">{{ phase.label }}</h3>
                                        </div>
                                        <div class="panel-body">
                                            <p><strong>Start:</strong> {{ phase.start_date }}</p>
                                            {% if phase.description %}
                                                <p><strong>Description:</strong> {{ phase.description }}</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                                <div class="phase-list-item panel phase-list-item-default phase-list-item-deadline">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><strong>Competition Ends</strong></h3>
                                </div>
                                <div class="panel-body">
                                    <p> {% if competition.end_date %} <strong>{{competition.end_date}}</strong>
                                    {% else %} <strong>Never</strong>
                                    {% endif %}
                                    </p>
                                </div>
                                </div>
                            </div>

                        </div>
                    </div>
                {% endif %}
                <div class="tab-pane" id="{{ tab.codename|slugify }}">
                    <div class="tab-inner">
                        {% if tab.codename == "participate" %}
                            {% if not user.is_authenticated %}
                                <p>You must be logged in to participate in competitions.</p>
                                <a href="{% url 'account_login' %}?next=/competitions/{{ competition.id }}%23participate-get-data" class="btn btn-primary">Sign In</a>
                            {% else %}
                                {% if my_status == "unknown" %}
                                    <form id="participate_form">
                                        {% csrf_token %}
                                        <p>You have not yet registered for this competition.</p>
                                        <p>To participate in this competition, you must accept its specific terms and conditions. After you register, the competition organizer will review your application and notify you when your participation is approved.</p>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="agreed_terms" id="checkbox" required onclick="Competition.registationCanProceed();">
                                                I accept the <a href="#learn_the_details-terms_and_conditions" target="_blank">terms and conditions</a> of the competition.
                                            </label>
                                        </div>
                                        <input type="submit" id="participateButton" class="disabledStatus btn btn-primary margin-top" value="Register" />
                                    </form>
                                {% elif my_status == "pending" %}
                                    <p>Your request to participate in this challenge has been received and a decision is pending.</p>
                                {% elif my_status == "denied" %}
                                    <p>Your request to participate in this competition was denied or your privileges have been suspended.</p>
                                    {% if my_participant.reason %}
                                        <p>Reason: {{my_participant.reason}}</p>
                                    {% endif %}
                                {% endif %}
                                {% if my_status == "approved" %}
                                    {% include "web/competitions/_innertabs.html" %}
                                {% endif %}
                            {% endif %}
                        {% elif tab.codename == 'results' %}
                            {% include "web/competitions/_results.html"%}
                        {% else %}
                            {% include "web/competitions/_innertabs.html" %}
                        {% endif %}
                    </div>
                </div>

            {% endfor %}
        </div>
    </section>
        <div class="row">
        <div class="col-sm-4">
            {% if competition.show_top_three and top_three %}
                <table class="table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Username</th>
                        <th>Score</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for leader in top_three %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ leader.username }}</td>
                            <td>{{ leader.score }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
        <div class="col-sm-8">
            {% if competition.show_chart %}
                {% if graph %}
                    {% include "web/competitions/_chart.html" %}
                {% endif %}
            {% else %}
                <!-- Do nothing -->
            {% endif %}
        </div>
    </div>
</div>

{% endblock content %}

{% block jsincludes %}
    <script>
        $('#view_all_phases').on('click', function(e){
            $('#competition_tab_nav a[href="#phases"]').tab('show');
        });
        $(function(){
            var show_location = function(hash) {
                var main_tab = hash.split('-')[0];
                var sub_tab = hash.split('-')[1];

                $('#competition_tab_nav a[href="' + main_tab + '"]').tab('show');
                $(main_tab + ' .innertabs a[href="' + main_tab + '-' + sub_tab + '"]').tab('show');
            };

            if(location.hash !== ''){
                show_location(location.hash);
            }else {
                $('#competition_tab_nav a:first').tab('show')
            }
            $('#competition_tab_nav a, .innertabs a').on('show.bs.tab', function(e){
                return location.hash = $(e.target).attr('href').substr(1);
            });
            if($('#participate-submit_results').hasClass('active')){
                $('#submissions_phase_buttons .active').click();
            } else if($('#results').hasClass('active')){
                $('#results_phase_buttons .active').click();
            };
            $('a[href="#participate-submit_results"]').on('shown.bs.tab', function(e){
                $($(e.target).attr('href') + ' .active').click();
            });
            $('a[href="#results"]').on('shown.bs.tab', function(e){
                $($(e.target).attr('href') + ' .active').click();
            });

            $('#learn_the_details .col-sm-9 a').on('click', function() {
                show_location('#' + $(this).attr('href').split('#')[1]);
            });
        });

    </script>
{% endblock %}

{% block extra_headers %}
    {{ submission_upload_form.media }}
{% endblock %}
